<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>LCH Colour picker</title>
	<meta name="viewport" content="initial-scale=1">
	<link rel="stylesheet" href="style.css">
	<script src="index.js" type="module"></script>
	<link rel="icon" id="favicon">
	<script src="https://stretchy.verou.me/dist/stretchy.iife.min.js" data-stretchy-filter="autosize" async defer></script>
</head>
<body id="app">
	<main :style="{ '--color': css_color }">
		<header>
			<h1>
				<select class="autosize" v-model="spaceId">
					<option v-for="space in color_spaces" :value="space.id">{{space.name}}</option>
				</select>
				<div>Colour Picker <button onclick="CSS_color_to_LCH()">Import color…</button></div>
			</h1>
		</header>

		<label v-for="(meta, i) in coord_meta" class="color-slider-label">
			{{ meta.name }} ({{ meta.min }}-{{ meta.max }})
			<input class="color-slider" type="range" v-model.number="coords[i]" :style="`--stops: ${ slider_steps[i] }`" :min="meta.min" :max="meta.max" :step="meta.step" />
			<input type="number" v-model.number="coords[i]" class="autosize" :style="`--percentage: ${coords[i] / (meta.max - meta.min) }`" :min="meta.min" :max="meta.max" />
		</label>

		<label class="color-slider-label">Alpha (0-100)
			<input class="color-slider" type="range" v-model.number="alpha"
			:style="`--stops: ${ slider_steps[coord_meta.length] }`" />
			<input type="number" class="autosize" v-model.number="alpha" :style="`--percentage: ${alpha / 100}`" max="100" />
		</label>

		<fieldset>
			<legend>Output <span class="precision autosize">(<input v-model="precision" type="number" min="0" max="20"> significant digits)</span></legend>
			<label>Serialized color
				<input class="color-css" :value="serialized_color" readonly />
			</label>

			<label>Displayed color
				<input class="color-css" :value="css_color" readonly />
			</label>

			<label :class="!color.inGamut('srgb', {epsilon: .00005}) ? 'out-of-gamut' : ''">
				<abbr>sRGB</abbr> Color
				<input class="color-srgb" :value="serialized_color_srgb" readonly />
				<div class="out-of-gamut-warning">Color is actually {{ serialized_color_srgb_oog }}, which is out of sRGB gamut; auto-corrected to sRGB boundary.</div>
			</label>
		</fieldset>
	</main>
</body>
</html>
